<template>
  <div class="student-list">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>异常人员列表</span>
      </div>

      <QuerySearch ref="querySearch" :formConfigurationItem="searchTable" @changeptselect="changeData">
        <!-- 按钮插槽 -->
        <template v-slot:btn="slotProps">
          <div class="btn-box">
            <el-button @click="czData({})">重置</el-button>
            <el-button type="primary" @click="searchBtn(slotProps.data)">搜索</el-button>
          </div>
        </template>
      </QuerySearch>

      <div class="student-table">
        <QueryTable
          :tableConfiguration="tableConfiguration"
          :displayContent="displayContent"
          :formData="formData"
          ref="queryTable"
          :api="getTableServe"
        >
          <template v-slot:avatar="{ scope }">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.avatar"
              :preview-src-list="[scope.row.avatar]"
            ></el-image>
          </template>
          <template v-slot:room_name="{ scope }">
            {{ scope.row.community_name }}{{ scope.row.building_name }}{{ scope.row.floor_name
            }}{{ scope.row.room_name }}
          </template>
          <template v-slot:type="{ scope }">
            {{ scope.row.type == 1 ? '学生' : scope.row.type == 2 ? '临时人员' : '未知类型' }}
          </template>
        </QueryTable>
      </div>
    </el-card>
  </div>
</template>

<script>
import QueryTable from '@/components/queryTable/index.vue';
import QuerySearch from '@/components/querySearch/index.vue';

import { sysstudentlist, arealevelfind, syspartyorganize } from '@/api/comment/studentList.js';

export default {
  components: {
    QueryTable,
    QuerySearch
  },
  data() {
    return {
      getTableServe: sysstudentlist,
      //配置文件
      displayContent: {
        height: '52.5vh',
        indexFixed: true,
        selectionFixed: true,
        selection: false,
        index: true,
        paginationShow: true
      },
      formData: {
        yc: true
      }, //传给后端的参数
      tableConfiguration: [
        {
          prop: 'name',
          label: '姓名',
          width: '260',
          //   showOverflowTooltip: true,
          align: 'center'
        },
        // {
        //   prop: 'avatar',
        //   label: '人脸照片',
        //   width: '260',
        //   align: 'center',
        //   sockets: true
        // },
        {
          prop: 'no',
          label: '学/工号',
          width: '260',
          align: 'center'
        },
        {
          prop: 'type',
          label: '人员类型',
          width: '260',
          align: 'center',
          sockets: true
        },
        {
          prop: 'mobile',
          label: '联系方式',
          width: '260',
          align: 'center'
        },
        {
          prop: 'room_name',
          label: '宿舍',
          width: '260',
          align: 'center',
          sockets: true
        },
        {
          prop: 'merge_name',
          label: '部门',
          width: '260',
          align: 'center'
        },
        {
          label: '操作',
          prop: 'btn',
          width: '220px',
          align: 'center',
          fixed: 'right',
          sockets: true
        }
      ],
      //搜索列表配置
      searchTable: [
        {
          span: 4,
          type: 'input',
          placeholder: '姓名',
          value: 'name'
        },
        {
          span: 4,
          type: 'input',
          placeholder: '学/工号',
          value: 'no'
        },
        {
          span: 4,
          type: 'input',
          placeholder: '联系方式',
          value: 'mobile'
        },
        {
          span: 4,
          type: 'input',
          placeholder: '校区/学院/专业/班级',
          value: 'searchKey'
        },
        {
          span: 4,
          type: 'select',
          placeholder: '人员类型',
          value: 'type',
          options: [
            {
              value: 1,
              label: '学生'
            },
            {
              value: 2,
              label: '临时人员'
            }
          ]
        },
        {
          span: 4,
          type: 'select',
          placeholder: '园区',
          clearable: false,
          value: 'yq',
          level: {
            mylevel: 1,
            name: '楼幢', //对应下一级的placeholder
            id: 1
          }, //查询楼幢需要
          optionsConfig: {
            value: 'community_id',
            label: 'name'
          },
          options: []
        },
        {
          span: 4,
          type: 'select',
          clearable: false,
          placeholder: '楼幢',
          value: 'ld',
          level: {
            mylevel: 2,
            name: '楼层',
            id: 2
          }, //查询楼层需要
          optionsConfig: {
            value: 'building_id',
            label: 'name'
          },
          options: []
        },
        {
          span: 4,
          type: 'select',
          clearable: false,
          placeholder: '楼层',
          level: {
            mylevel: 3,
            name: '房屋',
            id: 3
          }, //查询房屋需要
          value: 'lc',
          optionsConfig: {
            value: 'floor_id',
            label: 'name'
          },
          options: []
        },
        {
          span: 4,
          type: 'select',
          clearable: false,
          placeholder: '房屋',
          value: 'fw',
          level: {
            mylevel: 4,
            name: '房屋'
          }, //查询房屋需要
          optionsConfig: {
            value: 'room_id',
            label: 'name'
          },
          options: []
        },
        // {
        //   span: 4,
        //   type: 'cascader',
        //   placeholder: '组',
        //   value: 'searchKey',
        //   props: {
        //     value: '_id', //配置展示主要是后端使用的样式
        //     label: 'name'
        //   },
        //   options: []
        // },
        {
          span: 12,
          type: 'btn'
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getarealevelfind({ level: 0 }, '园区');
    this.getsyspartyorganize('组');
  },
  methods: {
    //搜索按钮
    searchBtn(val) {
      console.log(val, '搜索框');

      this.formData = { ...this.formData, ...val };

      console.log(this.formData, '搜索框2');

      this.$nextTick(() => {
        this.$refs.queryTable.handleCurrentChange(1);
      });
    },

    //重置
    czData(val) {
      this.formData = {};

      this.$nextTick(() => {
        this.$refs.querySearch.clearData();
        this.$refs.queryTable.handleCurrentChange(1);
      });
    },

    //普通下拉选
    changeData(e) {
      let myList = ['园区', '楼幢', '楼层', '房屋'];
      let id = e.value;
      let it = e.item;
      if (myList.indexOf(it.placeholder) != -1) {
        this.$set(this.formData, 'level', it.level.mylevel);
        this.$set(this.formData, 'value', id);

        //定点清除
        this.searchTable.forEach((item) => {
          if (it.placeholder == '园区') {
            let qc = ['楼幢', '楼层', '房屋'];
            if (qc.indexOf(item.placeholder) != -1) {
              item.options = [];
              console.log(item.value);
              this.$refs.querySearch.clearOne(item.value);
            }
          }

          if (it.placeholder == '楼幢') {
            let qc = ['楼层', '房屋'];
            if (qc.indexOf(item.placeholder) != -1) {
              item.options = [];
              this.$refs.querySearch.clearOne(item.value);
            }
          }

          if (it.placeholder == '楼层') {
            let qc = ['房屋'];
            if (qc.indexOf(item.placeholder) != -1) {
              item.options = [];
              this.$refs.querySearch.clearOne(item.value);
            }
          }
        });

        //没有就证明是最后一级不需要调用了
        if (it.level.id) {
          this.$nextTick(() => {
            this.getarealevelfind({ level: it.level.id, value: id }, it.level.name);
          });
        }
      }
    },

    //获取--校区/楼栋/楼层/房屋
    async getarealevelfind(val, name) {
      try {
        let res = await arealevelfind(val);
        if (res.code == 0) {
          this.searchTable.forEach((item) => {
            if (item.placeholder == name) {
              item.options = res.data;
            }
          });
        }
      } catch (error) {}
    },

    //获取机构
    async getsyspartyorganize(name) {
      try {
        let res = await syspartyorganize();
        if (res.code == 0) {
          console.log(res, 'sdfsfsf');

          this.searchTable.forEach((item) => {
            if (item.placeholder == name) {
              item.options = res.data;
            }
          });
        }
      } catch (error) {}
    }
  }
};
</script>

<style lang="scss" scoped>
.student-list {
  width: 100%;

  box-sizing: border-box;
  padding: 10px;

  .student-table {
    margin-top: 15px;
  }

  .btn-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
